<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>

        //文档和图片内容加载完毕执行
        window.onload = function () {
            //  事件的绑定二 
            //1.获得需要绑定事件的元素对象
            var btn = document.querySelector("#btn");
            //2.为对象绑定单击事件监听
            btn.onclick = function () {
                alert("按钮被点击了");
            }



            //为div绑定鼠标移入事件
            var box = document.querySelector("#box");
            box.onmouseover = function () {
                //div变色 文字变色 文字大小
                //box.style.fontSize = "150px";
                this.style.fontSize = "150px";
                this.style.color = "yellow";
                this.style.backgroundColor = "green";
            }

            box.onmouseout = function () {
                //div变色 文字变色 文字大小
                box.style.fontSize = "15px";
                this.style.color = "black";
                this.style.backgroundColor = "red";
            }


            var inp = document.querySelector("#inp");
            //获取光标
            inp.onfocus = function () {
                this.value = "我已经获得光标";
            }
            inp.onblur = function () {
                this.value = "666";
            }


            //获取表单
            var myform = document.querySelector("#myform");
            myform.onsubmit = function () {
                alert("表单提交");

            }

        }

    </script>
</head>

<body>
    <!-- 事件的绑定一 -->
    <button onclick="alert('讨厌点我干嘛?')">点我一下</button>

    <button id="btn">点我一下</button>

    <div id="box">666</div>

    <input type="text" id="inp">

    <form id="myform" action="#" method="post">
        <input type="text" name="a" id="a"> <br>
        <input type="submit" value="注册">
    </form>
</body>

</html>